<template>
  <div class="searchbox">
    <div class="iptbox">
      <div class="searchdiv">
        <input
          class="searchipt"
          type="text"
          @focus="iptFocus"
          @blur="iptBlur"
          placeholder="搜索位置"
        />
      </div>
      <div class="searchbtn">
        <i class="iconfont">&#xe600;</i>
      </div>
      <div class="pathbtn" @click="getpath">
        <i class="iconfont">&#xe65a;</i>
      </div>
    </div>

    <transition name="list">
      <div class="bottom" v-if="showList">
        <ul class="findlist">
          <li v-for="(item, index) in findlist" :key="index">
            <i class="findlistitem">{{ item.icon }}</i
            ><strong>{{ item.name }}</strong
            ><span>{{ item.address }}</span>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "search",
  data() {
    return {
      showList: false,
      findlist: [
        { icon: "&#xe602;", name: "name1", address: "addr1" },
        { icon: "&#xe602;", name: "name1", address: "addr1" },
        { icon: "&#xe602;", name: "name1", address: "addr1" },
        { icon: "&#xe602;", name: "name1", address: "addr1" }
      ]
    };
  },
  methods: {
    // 输入框获取焦点
    iptFocus: function() {
      this.showList = true;
    },
    // 输入框失去焦点
    iptBlur: function() {
      this.showList = false;
    },
    //点击X切换组件
    getpath: function() {
        this.$emit("getPath");
    }
  }
};
</script>
<style lang="scss" scoped>
.searchbox {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 100;
  width: 360px;
  height: 45px;
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  // 查找部分
  .iptbox {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 120;
    .searchipt {
      box-sizing: border-box;
      text-indent: 15px;
      border: none;
      width: 219px;
      height: 20px;
      margin-top: 12.5px;
      line-height: 20px;
      padding: 0;
      letter-spacing: 0.5px;
      font-size: 14px;
    }
    .searchbtn {
      position: absolute;
      right: 45px;
      top: 0;
      line-height: 45px;
      width: 45px;
      height: 45px;
      i {
        font-size: 25px;
        &:hover {
          color: #0f89f5;
          cursor: pointer;
        }
      }
    }
    .pathbtn {
      position: absolute;
      right: 0;
      top: 0;
      width: 45px;
      height: 45px;
      background-color: #f8f8f8;
      border-radius: 0 3px 3px 0;
      text-align: center;
      line-height: 45px;
      i {
        font-size: 25px;
        color: #0f89f5;
        &:hover {
          color: #7c8196;
          cursor: pointer;
        }
      }
    }
  }
  // 列表部分
  .bottom {
    width: 100%;
    background: #fff;
    border-radius: 3px;
    box-sizing: border-box;
    margin-top: 5px;
    z-index: 50;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    .findlist {
      width: 100%;
      list-style: none;
      li {
        font-size: 13px;
        cursor: pointer;
        color: #9b9faf;
        height: 32px;
        width: 100%;
        box-sizing: border-box;
        line-height: 32px;
        padding-left: 15px;
        &:hover {
          cursor: pointer;
          background-color: #f3f3f3;
        }
      }
    }
  }
}

/**设置动画 */
.list-enter {
  transform: translateY(-45px);
}
.list-enter-active {
  transition: transform 0.3s ease-in-out;
}
.list-enter-to {
  // transform: translateY(200px);
}
.list-leave {
}
.list-leave-active {
  transition: transform 0.1s ease-out;
}
.list-leave-to {
  transform: translateY(-45px);
}
</style>
